<template>
	<su-popup :show="show" type="bottom" round="40" :isMaskClick="true" backgroundColor="#fff"
		@close="emit('close')">
		<view class="list ss-p-30">
			<view class="list-title ss-m-b-30">使用/退款记录</view>
			<scroll-view scroll-y="true" class="list-scroll" >
				<view class="list-item ss-m-b-30 ss-p-b-30" v-for="(item,index) in list" :key="index">
					<view class="status ss-flex justify-between align-center">
						<view class="title">
							<text v-if="item.status === 0">待使用</text>
							<text v-if="item.status === 1">已使用</text>
							<text v-if="item.status === -1">已退款</text>
							<text v-if="item.status === -2">已过期</text>
						</view>
						<!-- <view class="go-info ss-flex justify-start align-center">
							<view class="go-text" style="color: #888888;">立即评价</view>
							<uni-icons type="right" size="16" color="#888888"></uni-icons>
						</view> -->
					</view>
					<view class="time ss-flex justify-start align-center ss-m-t-20" v-if="item.status === 1">
						<view class="label">使用时间：</view>
						<view class="content">{{item.use_time}}</view>
					</view>
					<view class="store ss-flex justify-start align-center ss-m-t-20" v-if="item.status === 1">
						<view class="label">使用门店：</view>
						<view class="content">{{name}}</view>
					</view>
					<view class="code ss-flex justify-start align-start ss-m-t-20">
						<view class="label">劵码：</view>
						<view class="content">
							<view class="code-item ss-m-b-20">{{item.code}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		reactive,
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	
	const emit = defineEmits(['close'])
	
	const props = defineProps({
		show:{
			type:Boolean,
			default: false,
		},
		list:{
			type:Array,
			default: [],
		},
		name:{
			type:String,
			default: '',
		}
	})
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	
	.list {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		
		.list-title {
			font-weight: 500;
			font-size: 32rpx;
			color: #272727;
			text-align: center;
		}
		
		.list-scroll {
			width: 100%;
			height: 850rpx;
			
			.list-item {
				border-bottom: 1rpx solid #D8D8D8;
				
				.status {
					.title {
						font-weight: 500;
						font-size: 30rpx;
						color: #272727;
					}
				}
				
				.label {
					font-weight: 400;
					font-size: 26rpx;
					color: #888888;
				}
				
				.content {
					font-weight: 400;
					font-size: 26rpx;
					color: #343434;
					margin-left: 20rpx;
				}
				
				.code-item {
					// text-decoration-line: line-through;
				}
			}
		}
	}
	
	.go-info {
		.go-text {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #2A2A2A;
		}
	}
</style>